<template>
    <div class="p-2">
        <transition
            :enter-active-class="proxy?.animate.searchAnimate.enter"
            :leave-active-class="proxy?.animate.searchAnimate.leave"
        >
            <div class="search">
                <el-form :model="queryParams" ref="queryFormRef" :inline="true">
                    <el-form-item prop="productCategoriesType">
                        <el-select v-model="queryParams.productCategoriesType" placeholder="请选择">
                            <el-option v-for="item in typeList" :key="item.id" :label="item.majorName" :value="item.majorType"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item prop="productSubcategoryType">
                        <el-select v-model="queryParams.productSubcategoryType" placeholder="请选择">
                            <el-option v-for="item in subTypeList" :key="item.id" :label="item.subclassName" :value="item.subclassType"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="模糊查询" prop="specifications">
                        <el-input v-model="queryParams.specifications" placeholder="请输入"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
                        <el-button icon="Refresh" @click="resetQuery">重置</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </transition>
    </div>
</template>

<script setup lang="ts">
import type { FormInstance } from 'element-plus';
import { getTotalCategoryByMaterialTypeApi, getSingleByTotalApi } from '@/api/sj/warehouse/typeManagement';
import { getAuxiliaryListApi } from '@/api/sj/warehouse/auxiliary';

const { proxy } = getCurrentInstance() as ComponentInternalInstance;

const queryFormRef = ref<FormInstance>();
const data = reactive({
    queryParams: {
        productCategoriesType: undefined,
        productSubcategoryType: undefined,
        specifications: undefined,
        pageNum: 1,
        pageSize: 30
    }
});
const { queryParams } = toRefs(data);
const typeList = ref<any[]>([]);
const subTypeList = ref<any[]>([]);
const materialList = ref<any[]>([]);
const totalData = ref(0);
const materialType = '2';

/** 根据材料类型获取大类 */
const getTotalTypes = async () => {
    const { data } = await getTotalCategoryByMaterialTypeApi({materialType: materialType});
    typeList.value = data;
};

/** 获取材料小类 */
const getSubCategory = async (majorType: string) => {
    const { data } = await getSingleByTotalApi(majorType);
    subTypeList.value = data;
};

/** 获取辅材列表 */
const getAuxiliaryList = async () => {
    const { rows, total } = await getAuxiliaryListApi(queryParams.value);
    materialList.value = rows;
    totalData.value = total;
};

watch(()=>queryParams.value.productCategoriesType, (newData)=>{
    if(newData){
        getSubCategory(newData);
        queryParams.value.productSubcategoryType = undefined;
    }
},{deep: true});

/** 搜索按钮操作 */
const handleQuery = () => {
    queryParams.value.pageNum = 1;
    getAuxiliaryList();
};

const resetQuery = () => {
    queryFormRef.value?.resetFields();
    handleQuery();
};


</script>

<style scoped>

</style>